<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册页</title>
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/conmmon.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="login.html">登录</a>
        <a href="activationAccount.html" target="_blank">用户激活</a>

    </div>
    <!-- 版心 -->
    <div class="register-container">
        <div class="register-dialog">
            <!-- 注册对话框的头部信息 -->
        <div class="header">
            <span>注册新用户</span>
            <div class="space"></div>
            <span>我有账号,去<a href="login.html">登录</a></span>
        </div>
        <!-- 注册对话框的注册部分 -->
        <div class="register-part">
            <h3>欢迎注册</h3>
            <div class="row">
                <span>用户昵称：</span>
                <input type="text" id="username" name="username" >
            </div>
            <div class="row">
                <span>绑定邮箱：</span>
                <input type="text" id="email" name="email" >
            </div>
            <div class="row">
                <span>用户密码：</span>
                <input type="password" id="password1" name="password1">
            </div>
            <div class="row">
                <span>确认密码：</span>
                <input type="password" id="password2" name="password2">
            </div>
            <div class="row">
                <button id="submit" onclick="mysub()">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<script>
    function mysub(){
        // 1，非空判断
        // 1.1，得到输入的组件
        let username = jQuery("#username");
        let email = jQuery("#email");
        let password1 = jQuery("#password1");
        let password2 = jQuery("#password2");
        // 1.2，判断输入的组件是否为空
        if(username.val().trim() == ""){
            alert("请输入用户名！");
            username.focus(); // 聚集光标
            return false;
        }
        if(email.val().trim() == ""){
            alert("请输入邮箱！");
            email.focus(); // 聚集光标
            return false;
        }
        if(password1.val().trim() == ""){
            alert("请输入密码！");
            password1.focus();
            return false;
        }
        if(password2.val().trim() == ""){
            alert("请输入确认密码！");
            password2.focus();
            return false;
        }
        if(password1.val() != password2.val()){
            alert("两次输入不一致，请检查输入！");
            password1.focus();
            return false;
        }
        // 2，把提交按钮设置为不可用(禁用状态）
        jQuery('#submit').attr("disabled",'disabled');
        // 3，把当前页面的数据提交给后端
        jQuery.ajax({
            url:"/user/register",
            type:"POST",
            data:{
                "username":username.val().trim(),
                "password":password1.val().trim(),
                "email":email.val().trim()
            },
            success:function (res){
                // 4，根据后端返回的结果（成功 or 失败）再处理后续的操作
                if(res.code == 200 && res.data == 1){
                    alert("注册成功！激活码已发送！请于10分钟内激活账号！");
                    window.open("activationAccount.html");
                    location.href = "login.html";

                }else{
                    alert("抱歉：注册失败！ " + res.message);
                    location.href = "register.html";
                    // 把提交按钮的禁用状态解除
                    jQuery("#submit").removeAttr("disabled");
                }
            }
        });
    }

</script>
</html>